<template>
  <div class="integral_box">
    <div id="slogan">
      <p class="tag">积分奖励兑换</p>
      <p>我的积分:{{score}}</p>
    </div>
    <div></div>
    <el-row class="integral">
      <el-col
        :span="7"
        v-for="(o, index) in list"
        :key="`insgral_${index}`"
        style="margin-right: 20px;margin-bottom: 20px;"
      >
        <el-card :body-style="{ padding: '0px' }"  shadow="hover">
          <img
            :src="o.imageUrl"
            class="image"
          />
          <div style="padding: 14px">
            <span>{{o.awardName}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ o.createTime }}&#x3000;所需积分：{{o.points}}</time>
              <el-button type="text" class="button" @click="toBuy(o.id)">兑换</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="query.current"
          :page-size="query.size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
  </div>
</template>
<script>
import { awardQuery, awardBuy, rubbishPoints  } from '@/api/info'
import Cookies from 'js-cookie'
export default {
  data() {
    return{
      currentDate: new Date(),
      query: {
        size: 10,
        current: 1,
        input: {
          userId: this.$store.getters.userInfo.id,
        },
      },
      list: [],
      total: 0,
      score: 0,
      userInfo: {}
    }
  },
  created(){
    this.userInfo = JSON.parse(Cookies.get("userInfo"))
  },
  mounted() {
    this.getMy()
    this.queryList();
  },
  methods: {
    handleCurrentChange(val) {
      this.query.current = val
      this.queryList()
    },
    queryList() {
      awardQuery(this.query).then((res) => {
        this.list = res.data.records || [];
        this.total = res.data.total;
      });
    },
    toBuy(awardId ){
      awardBuy({awardId ,userId: this.userInfo.id}).then(res=>{
        this.$message.success(res.msg || '兑换成功')
      })
    },
    getMy(){
      rubbishPoints({userId: this.userInfo.id}).then(res=>{
        console.log(res)
        this.score = res.data.points
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.integral_box{

  .integral{
    width: 80vw;
    margin: 15px auto;
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 300px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
